feat(theme): configurable schema expansion level (#1222)#1449
Merged
Conversation
Adds an opt-in `themeConfig.api.schemaExpansion` option that controls the default expansion depth of nested request/response schema trees, plus an inline icon control next to each schema header that lets readers change the depth at view time. The selected depth is persisted in localStorage. - New `SchemaExpansionProvider` and `SchemaDepthProvider` contexts thread the active expansion level and per-node depth without prop-drilling through the recursive Schema renderer. - `SchemaNodeDetails` opens its `<Details>` when `depth < level` and remounts on level change so the control feels responsive. - New `SchemaExpansionControl` renders an icon trigger inline with the Body/Schema headers; clicking opens a compact popover with depth options including "All". - Behavior is unchanged when `schemaExpansion` is unset. Demo: enables the option and adds an envelope-wrapped fixture under `demo/examples/tests/schemaExpansion.yaml` for manual exercise. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
Size Change: +15.5 kB (+0.68%) Total Size: 2.28 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Visit the preview URL for this PR (updated for commit 02cfa64): https://docusaurus-openapi-36b86--pr1449-y9rk732r.web.app (expires Tue, 12 May 2026 14:59:09 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: bf293780ee827f578864d92193b8c2866acd459f |
Defaults to the standard arrow cursor on hover for a less clicky feel. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Lock the trigger button to a 22x22 box so the hover background and click area match the icon, rather than stretching to the flex row's height. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
When the surrounding <details> was collapsed, the absolutely-positioned popover got clipped by the details element. Render the popover via a portal to document.body with fixed positioning computed from the trigger's bounding rect, and reposition on scroll/resize. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Avoid pulling in @types/react-dom by computing the trigger's bounding rect and rendering the popover with position: fixed in-place. Fixed positioning still escapes the surrounding details overflow, so the menu is no longer clipped when the schema is collapsed. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
When the parent summary became a flex row, the h3/strong holding the title and the REQUIRED span fell back to block layout and wrapped. Make the title element itself an inline-flex with a small gap so the title and the badge stay on one line and align vertically. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Switch the aria-label / title from "Schema expansion depth" to a more descriptive "Set how deep schemas auto-expand" so hovering the icon explains what the control does. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Repositioning the popover during scroll lagged behind the trigger and felt detached. Close the popover instead so it always appears anchored at the moment of opening. Also revert the tooltip text to its original "Schema expansion depth". Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Centralize translation IDs under OPENAPI_SCHEMA_EXPANSION in translationIds.ts so they can be discovered alongside other theme strings and overridden via i18n catalogs. - aria-haspopup="menu" (was "true") + aria-controls + popover id + aria-label on the menu so assistive tech announces it as a menu. - Move focus to the active option when the menu opens; arrow-key navigation between options; ESC stops propagation so it doesn't also collapse a parent details element. - Per-option aria-label "Expand to depth N" via translate() so screen readers get a full description instead of just a number. - Class names already follow BEM (block, __element, --modifier). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
`themeConfig.api.schemaExpansion.default` now reliably auto-expands to
the configured depth on every page load when `enabled` is false — the
provider previously kept reading from localStorage in that case, so a
stale value from a prior session where the control was enabled could
shadow the new default. Persistence is now implicitly off whenever the
control is hidden.
Also clarify the docstrings so it's discoverable that you can set just
`{ default: 1 }` to get auto-expansion without rendering the UI.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
sserrata
added a commit
that referenced
this pull request
May 6, 2026
Adds documentation for the new schemaExpansion theme option (introduced in #1449) to intro.mdx and both READMEs, covering the nested enabled, default, max, and persist fields plus an example config. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #1222.
Adds an opt-in
themeConfig.api.schemaExpansionoption that controls the default expansion depth of nested request/response schema trees, plus an inline icon control next to each schema header that lets readers change the depth at view time. The selected depth is persisted inlocalStorage.Inspired by Redoc's
schemaExpansionLevel— useful primarily for envelope-wrapped APIs (e.g.{ status, meta, data: {...} }) where readers otherwise have to manually click into everydataproperty.How it works
SchemaExpansionProviderandSchemaDepthProvidercontexts thread the active expansion level and per-node depth without prop-drilling through the recursiveSchemarenderer.SchemaNodeDetailsopens its<Details>whendepth < level. Keying onlevelforces a remount on level change so the control feels responsive without losing per-row click toggling afterward.SchemaExpansionControlrenders a small icon trigger inline with the Body / Schema headers; clicking opens a compact popover with depth options including "All". The popover is positioned withposition: fixed(computed from the trigger's bounding rect) so it isn't clipped when the surrounding<details>is collapsed, and closes on scroll to stay visually anchored.schemaExpansionis unset — no control rendered, schemas remain collapsed by default.Config
Accessibility & i18n
<button>trigger witharia-haspopup="menu",aria-expanded,aria-controls,aria-label, and a nativetitletooltip.role="menu"and its ownaria-label; options arerole="menuitemradio"witharia-checkedand a translated per-option label ("Expand to depth N").@docusaurus/Translateand registered intranslationIds.tsunderOPENAPI_SCHEMA_EXPANSION(theme.openapi.schema.expansion.*).Files
packages/docusaurus-theme-openapi-docs/src/theme/SchemaExpansion/— new context module, control component, BEM-style SCSSpackages/docusaurus-theme-openapi-docs/src/theme/Schema/index.tsx—SchemaNodeDetailsreads context, threads depthpackages/docusaurus-theme-openapi-docs/src/theme/{Request,Response}Schema/index.tsx— render the inline controlpackages/docusaurus-theme-openapi-docs/src/theme/ApiItem/index.tsx— wraps the page in the providerpackages/docusaurus-theme-openapi-docs/src/theme/translationIds.ts— registers the new translation keyspackages/docusaurus-theme-openapi-docs/src/types.d.ts— typesschemaExpansiononThemeConfig.apidemo/examples/tests/schemaExpansion.yaml— envelope-wrapped fixture for manual exercisedemo/docusaurus.config.ts— enables the option in the demoTest plan
/docs/tests/get-user-envelope-wrapped— the depth icon appears to the right of the "SCHEMA" headerdefault: 1, the top-leveldataproperty is open on load; deeper children are not0 1 2 3 4 All; selecting a value adjusts the open depth across the treelocalStoragekeydocusaurus-openapi-schema-expansion-level)schemaExpansionfrom the demo config hides the control and restores prior collapsed-by-default behavior🤖 Generated with Claude Code